<!DOCTYPE html>



  


<html class="theme-next mist use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">



  
  
    
    
  <script src="/lib/pace/pace.min.js?v=1.0.2"></script>
  <link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet">







<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon.ico?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.ico?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.ico?v=5.1.4">


  <link rel="mask-icon" href="/images/facicon.ico?v=5.1.4" color="#222">





  <meta name="keywords" content="HTML,CSS,">





  <link rel="alternate" href="/atom.xml" title="Key" type="application/atom+xml">






<meta name="description" content="所有HTMl元素可以看做盒子,在CSS中,’box-model’这一术语是用来设计和布局时使用的.CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充和实际内容. 盒子模型所谓盒子模型就是把HTML页面中的元素看做是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都是由元素的内容,内边距(padding),边框(border)和外边框(margin)组成.  如果把手机">
<meta name="keywords" content="HTML,CSS">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS盒子模型">
<meta property="og:url" content="https://blog.qipo.net/2017/08/15/box/index.html">
<meta property="og:site_name" content="Key">
<meta property="og:description" content="所有HTMl元素可以看做盒子,在CSS中,’box-model’这一术语是用来设计和布局时使用的.CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充和实际内容. 盒子模型所谓盒子模型就是把HTML页面中的元素看做是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都是由元素的内容,内边距(padding),边框(border)和外边框(margin)组成.  如果把手机">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://assets.qipo.net/box.jpg">
<meta property="og:image" content="http://assets.qipo.net/box1.jpg">
<meta property="og:image" content="http://assets.qipo.net/margin1.gif">
<meta property="og:image" content="http://assets.qipo.net/margin2.gif">
<meta property="og:image" content="http://assets.qipo.net/margin3.gif">
<meta property="og:image" content="http://assets.qipo.net/margin4.gif">
<meta property="og:image" content="http://assets.qipo.net/before.png">
<meta property="og:image" content="http://assets.qipo.net/after.png">
<meta property="og:updated_time" content="2020-06-04T08:30:16.904Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="CSS盒子模型">
<meta name="twitter:description" content="所有HTMl元素可以看做盒子,在CSS中,’box-model’这一术语是用来设计和布局时使用的.CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充和实际内容. 盒子模型所谓盒子模型就是把HTML页面中的元素看做是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都是由元素的内容,内边距(padding),边框(border)和外边框(margin)组成.  如果把手机">
<meta name="twitter:image" content="http://assets.qipo.net/box.jpg">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Mist',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://blog.qipo.net/2017/08/15/box/">





  <title>CSS盒子模型 | Key</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Key</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description"></h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br>
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br>
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://blog.qipo.net/2017/08/15/box/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Key">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Key">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">CSS盒子模型</h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-08-15T08:16:54+08:00">
                2017-08-15
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/CSS/" itemprop="url" rel="index">
                    <span itemprop="name">CSS</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  3.3k
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  12
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>所有HTMl元素可以看做盒子,在CSS中,’box-model’这一术语是用来设计和布局时使用的.CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充和实际内容.</p>
<h3 id="盒子模型"><a href="#盒子模型" class="headerlink" title="盒子模型"></a>盒子模型</h3><p>所谓盒子模型就是把HTML页面中的元素看做是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都是由元素的内容,内边距(padding),边框(border)和外边框(margin)组成.</p>
<p><img src="http://assets.qipo.net/box.jpg" alt></p>
<p>如果把手机想象成HTML元素,那么手机盒子就是一个CSS盒子模型,其中手机为CSS盒子模型的内容,填充泡沫的厚度为CSS盒子模型的内边距,纸盒的厚度为CSS盒子模型的边框.<br>多个手机放一起时</p>
<p><img src="http://assets.qipo.net/box1.jpg" alt></p>
<p>最终的网页就是由多个盒子组成.</p>
<h4 id="盒子宽度和高度的计算"><a href="#盒子宽度和高度的计算" class="headerlink" title="盒子宽度和高度的计算"></a>盒子宽度和高度的计算</h4><p>Width = <code>border-left</code> +<code>padding-left</code> + <code>width</code> +<code>padding-right</code> +<code>border-right</code></p>
<p>Height =<code>border-top</code> +<code>padding-top</code>+<code>height</code>+<code>padding-bottom</code>+<code>border-bottom</code></p>
<h4 id="边框属性border"><a href="#边框属性border" class="headerlink" title="边框属性border"></a>边框属性border</h4><p>边框宽度:</p>
<ul>
<li><code>border-top-width</code>:上边框宽度</li>
<li><code>border-right-width</code>：右边框宽度</li>
<li><code>border-bottom-width</code>：下边框宽度</li>
<li><code>border-left-width</code>：左边框宽度</li>
<li><code>border-width</code>：上边框宽度[右边框宽度 下边框宽度 左边框宽度]</li>
</ul>
<p>边框颜色:</p>
<ul>
<li><code>border-top-color</code>:上边框颜色</li>
<li><code>border-right-color</code>:右边框颜色</li>
<li><code>border-bottom-color</code>:下边框颜色</li>
<li><code>border-left-color</code>:左边框颜色</li>
<li><code>border-color</code>:上边框颜色 [右边框颜色 下边框颜色 左边框颜色]</li>
</ul>
<p>边框样式:</p>
<ul>
<li><code>border-top-style</code>:上边框样式</li>
<li><code>border-right-style</code>:右边框样式</li>
<li><code>border-bottom-style</code>:下边框样式</li>
<li><code>border-left-style</code>:左边框样式</li>
<li><code>border-style</code>:上边框样式 [右边框样式 下边框样式 左边框样式]</li>
</ul>
<p>常用样式: 实线:<code>solid</code>,虚线: <code>dashed</code>,点状线: <code>dotted</code>,双线: <code>double</code></p>
<blockquote>
<p>设置边框颜色时同时必须设置边框样式,如果未设置样式或设置为none,则其他的边框属性无效.</p>
</blockquote>
<p>边框的综合设置方法:<br>border-top:宽度 样式 颜色 ,如:<code>border-top: 1px solid red;</code><br>border:宽度 样式 颜色 ,如:<code>border: 1px solid red;</code></p>
<h4 id="内边距padding属性"><a href="#内边距padding属性" class="headerlink" title="内边距padding属性"></a>内边距padding属性</h4><p><code>padding-top</code>:上内边距<br><code>padding-left</code>:左内边距<br><code>padding-bottom</code>:下内边距<br><code>padding-right</code>:右内边距</p>
<p>综合设置:<br><code>padding:10px;</code>:这样设置上下左右内边距都为10px;<br><code>padding:10px 20px;</code>:这样设置上下内边距为10px,左右内边距为20px;</p>
<h4 id="外边距margin属性"><a href="#外边距margin属性" class="headerlink" title="外边距margin属性"></a>外边距margin属性</h4><p><code>margin-top</code>:上外边距<br><code>margin-right</code>:右外边距<br><code>margin-left</code>:左外边距<br><code>margin-bottom</code>:下外边距</p>
<p>综合设置:<br><code>margin:10px;</code>:这样设置上下左右外边距都为10px;<br><code>margin:10px 20px;</code>:这样设置上下外边距为10px,左右外边距为20px;</p>
<blockquote>
<p>注意:</p>
<ol>
<li>外边距可以使用负值,使相邻元素重叠.</li>
<li>可能会出现外边距合并的情况</li>
<li>为了操作方便,可以使用<code>*{margin:0;padding:0;}</code>取消浏览器的默认属性.</li>
</ol>
</blockquote>
<h5 id="外边距合并情况"><a href="#外边距合并情况" class="headerlink" title="外边距合并情况"></a>外边距合并情况</h5><p>外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,他会造成很多混淆.<br>简单的说,外边距合并指的是,当两个垂直外边距相遇时,他们将会形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者.</p>
<p>当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并.请看下图:</p>
<p><img src="http://assets.qipo.net/margin1.gif" alt></p>
<p>当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),他们的上或/和下外边距也会发生合并.请看下图:</p>
<p><img src="http://assets.qipo.net/margin2.gif" alt></p>
<p>尽管看上去有些奇怪,但是外边距甚至可以与自身发生合并.<br>假设有个空元素,他有外边距,但是没有边框或填充.在这种情况下,上外边距与下外边距就会碰到一起,他们就会发生合并:</p>
<p><img src="http://assets.qipo.net/margin3.gif" alt></p>
<p>如果这个外边距遇到另一个元素的外边框,他还会发生合并:</p>
<p><img src="http://assets.qipo.net/margin4.gif" alt></p>
<p>这就是一系列的段落元素占用空间非常小的原因,因为他们的所有外边距都合并到一起了,形成了一个小的外边距.</p>
<h5 id="解决嵌套元素的外边距合并"><a href="#解决嵌套元素的外边距合并" class="headerlink" title="解决嵌套元素的外边距合并"></a>解决嵌套元素的外边距合并</h5><p>对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会和子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并.<br>如果希望外边距不合并,可以为父元素定义1像素的上边框或者上内边框.这里以定义父元素的上边框为例,在父元素的CSS样式中增加如下代码:<br><code>border:1px solid red;</code>或者<code>padding-top:1px;</code></p>
<h3 id="浮动概念"><a href="#浮动概念" class="headerlink" title="浮动概念"></a>浮动概念</h3><p>元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,移动到其父元素中指定位置的过程.比喻:游泳池的池底以及水面游泳池的池底相当于标准流(文档流),水面相当于浮动的元素的所有层.水面的元素会遮挡水中的元素.</p>
<h4 id="浮动的CSS定义格式"><a href="#浮动的CSS定义格式" class="headerlink" title="浮动的CSS定义格式"></a>浮动的CSS定义格式</h4><p>选择器{<br>  float:属性值;<br>}<br>float的属性值如下:</p>
<ul>
<li>left:元素向左浮动</li>
<li>right:元素向右浮动</li>
<li>none:元素不浮动(默认值)</li>
</ul>
<h4 id="浮动的特点"><a href="#浮动的特点" class="headerlink" title="浮动的特点"></a>浮动的特点</h4><ol>
<li>浮动脱离标准流,不占位置,会影响标准流.浮动只有左右浮动.</li>
<li>浮动的元素A排列位置,跟上一个元素(块级)有关系.如果上一个元素有浮动,则A元素顶部会和上一个元素的顶部对齐;如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐.</li>
<li>一个父盒子里面的子盒子,如果其中一个子级有浮动,则其他子级都需要浮动.这样才能一行对齐显示.</li>
<li>浮动根据元素书写的位置来显示相应的浮动.</li>
<li>元素添加浮动后,元素会具有行内元素块元素的特性.元素的大小完全取决于定义的大小或者默认的内容有多少.</li>
<li>如果一个div没有设置高,这个div中的所有元素都浮动了,那么这个div的高为0.</li>
</ol>
<h3 id="浮动的影响以及清除"><a href="#浮动的影响以及清除" class="headerlink" title="浮动的影响以及清除"></a>浮动的影响以及清除</h3><h4 id="浮动的影响"><a href="#浮动的影响" class="headerlink" title="浮动的影响"></a>浮动的影响</h4><p>如果在一个大的没有设置高的div中有两个小的子div,那么这个大的div的高就是这两个小的div之和,但是一旦这两个小的div都浮动了,那么大的div高度就变为0,因为浮动之后div不会撑开父容器.这种情况会导致父盒子div后面的同级元素会和当前盒子中的浮动的子盒子重叠显示,导致页面混乱.</p>
<h4 id="浮动的清除方式"><a href="#浮动的清除方式" class="headerlink" title="浮动的清除方式"></a>浮动的清除方式</h4><ol>
<li>直接给父盒子设置一个高度(严格来说不算清除浮动).这种方式简单方便,但是当父盒子没有办法直接设置高度就必须用其他方法清除浮动.</li>
<li><p>在发生浮动的父盒子中的最后添加一个空元素,直接给该空元素设置clear属性值.</p>
<p>|——–|——–|<br>|clear属性值|含义|<br>|left|清除左浮动|<br>|right|清除右浮动|<br>|both|清除所有浮动|</p>
<p>但是当页面中发生浮动的元素很多时就需要添加很多空元素,不推荐使用.</p>
</li>
<li><p>直接给父盒子设置overflow属性<code>overflow:hidden;</code>这种方式简单方便,但是如果页面一旦出现定位,那么定位可能会受到影响.</p>
<p> |——-|——-|<br> |overflow值|含义|<br> |hidden|超出部分隐藏|<br> |scroll|超出部分显示滚动条|<br> |auto|超出部分显示滚动条,否则不显示|</p>
</li>
<li><p>使用伪元素清除浮动</p>
</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.charfix</span><span class="selector-pseudo">::after</span>,<span class="selector-class">.charfix</span><span class="selector-pseudo">::before</span>&#123;</span><br><span class="line">    <span class="attribute">content</span>:<span class="string">""</span>;</span><br><span class="line">    <span class="attribute">height</span>:<span class="number">0</span>;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">visibility</span>: hidden;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">clear</span>: both;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<p>调用时直接在class加上一个charfix即可.</p>
<h3 id="定位position"><a href="#定位position" class="headerlink" title="定位position"></a>定位position</h3><p>定位的基本思路很简单,它允许你定义的元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.可以迅速的完成其他方式难以实现的效果.</p>
<p>常用定位的属性值:</p>
<ol>
<li>static,默认情况下浏览器中所有的盒子都是静态的.</li>
<li>relative,相对定位,元素相对于自身位置的移动.</li>
<li>absolute,绝对定位,有三种情况.<br>(1)如果盒子中没有body之外的其他的祖先元素,那么在绝对定位的时候这个文职是相对于body的.<br>(2)如果盒子中有祖先元素,但是祖先元素并没有设置定位,那么在绝对定位的时候这个位置还是相对于body的.<br>(3)如果盒子中有祖先元素并且祖先元素有定位(absolute,relative都可以),那么这个时候我们的盒子定位是相对于最近的一个设置过定位的祖先元素的.</li>
<li>fixed,固定,以窗口页面进行设置,不会随着滚动条移动.</li>
</ol>
<h4 id="position不同属性的特点"><a href="#position不同属性的特点" class="headerlink" title="position不同属性的特点"></a>position不同属性的特点</h4><p>|——|——-|<br>|属性值|是否脱离标准流|<br>|static|否|<br>|relative|否|<br>|absloute|是|<br>|fixed|是|</p>
<h3 id="display属性"><a href="#display属性" class="headerlink" title="display属性"></a>display属性</h3><p>display属性用于规定元素生成的框类型,影响显示方式.<br>属性值:</p>
<ul>
<li><code>none</code>:此元素不会被显示</li>
<li><code>block</code>:此元素将被显示为块级元素,此元素前后会带有换行符.</li>
<li><code>inline</code>:此元素会被显示为内联元素,元素前后没有换行符.</li>
<li><code>inline-block</code>:行内块元素.</li>
</ul>
<h3 id="伪元素"><a href="#伪元素" class="headerlink" title="伪元素"></a>伪元素</h3><p>伪元素语法<code>::before/:before</code>,不过为了和伪类有所区别.一般使用<code>::before</code>.<br>这里先介绍两个伪元素<code>::before</code>,<code>::after</code>.<br><code>::before</code>:设置在对象前的内容.用来和<code>content</code>属性一起用,并且必须定义<code>content</code>属性.<br><code>::after</code>:设置在对象后的内容.用来和<code>content</code>属性一起用,必须定义<code>content</code>属性.</p>
<blockquote>
<p>content没有值无所谓,但必须要有这个函数.</p>
</blockquote>
<p>演示:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span></span><br><span class="line">      伪元素演示</span><br><span class="line">    <span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="css">    <span class="selector-tag">p</span><span class="selector-pseudo">::before</span>&#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">content</span><span class="selector-pseudo">:"</span>这是前面";</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-tag">p</span><span class="selector-pseudo">::after</span>&#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">content</span><span class="selector-pseudo">:"</span>这是后面";</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>伪元素演示<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>以上的html,会在伪元素演示前面加上这是前面,后面会加上这是后面.这就是伪元素的用法.</p>
<p>不过一般是用来清除浮动:</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">::before</span>, <span class="selector-class">.clearfix</span><span class="selector-pseudo">::after</span>&#123;</span><br><span class="line">  <span class="attribute">content</span>:<span class="string">""</span>;</span><br><span class="line">  <span class="attribute">clear</span>:both;</span><br><span class="line">  <span class="attribute">display</span>:blank;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>下面是清除浮动的实例:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>清除浮动<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="css">      <span class="selector-class">.charfix</span><span class="selector-pseudo">::before</span>,<span class="selector-class">.charfix</span><span class="selector-pseudo">::after</span>&#123;</span></span><br><span class="line"><span class="css">        <span class="selector-tag">content</span><span class="selector-pseudo">:""</span>;</span></span><br><span class="line"><span class="undefined">        clear: both;</span></span><br><span class="line"><span class="undefined">        display: block;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="css">      <span class="selector-class">.two</span>&#123;</span></span><br><span class="line"><span class="css">        <span class="selector-tag">width</span><span class="selector-pseudo">:100px</span>;</span></span><br><span class="line"><span class="css">        <span class="selector-tag">height</span><span class="selector-pseudo">:100px</span>;</span></span><br><span class="line"><span class="css">        <span class="selector-tag">float</span><span class="selector-pseudo">:left</span>;</span></span><br><span class="line"><span class="css">        <span class="selector-tag">background</span><span class="selector-pseudo">:red</span>;</span></span><br><span class="line"><span class="css">        <span class="selector-tag">border</span><span class="selector-pseudo">:solid</span> <span class="selector-tag">red</span> 1<span class="selector-tag">px</span>;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 清除浮动只需要父元素在这里写上charfix这个类 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- &lt;div class="one charfix"&gt; --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"one"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"two"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>清除浮动演示<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>清除浮动之前:</p>
<p><img src="http://assets.qipo.net/before.png" alt></p>
<p>清除浮动后:</p>
<p><img src="http://assets.qipo.net/after.png" alt></p>
<p>明显可以看出子类浮动导致父类没有高度的影响消除了.</p>
<h3 id="visbility"><a href="#visbility" class="headerlink" title="visbility"></a>visbility</h3><p>这个元素和<code>display</code>有点像,但他们是两种截然不同的东西.<br>visibility属性值有两个:<code>hidden</code>,<code>visble</code>.<br>其中<code>visibility:hidden</code>是元素隐藏,仍然占据页面位置.<code>visibility:visble</code>是元素显示.<br>而<code>display:none;</code>也是元素隐藏,但是并不会占据页面位置.要想显示设置<code>block</code>…即可.</p>
<h3 id="层级-z-index"><a href="#层级-z-index" class="headerlink" title="层级 z-index"></a>层级 z-index</h3><p>z-index:<code>auto</code>|<code>&lt;integer&gt;</code><br>默认值:<code>auto</code><br>适用于:定位元素.即定义了<code>position</code>为非<code>static</code>的元素.<br><code>auto</code>:元素在当前层叠上下文中的层叠级别是0.元素不会创建新的局部层叠上下文,除非它是根元素.<br><code>&lt;integer&gt;</code>:用整数值来定义层叠级别.可以为负值.<br>演示:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>z-index演示<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">      ul&#123;</span></span><br><span class="line"><span class="undefined">        list-style: none;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">      li&#123;</span></span><br><span class="line"><span class="undefined">        border: solid 2px red;</span></span><br><span class="line"><span class="css">        <span class="selector-tag">float</span><span class="selector-pseudo">:left</span>;</span></span><br><span class="line"><span class="css">        <span class="selector-tag">width</span><span class="selector-pseudo">:50px</span>;</span></span><br><span class="line"><span class="css">        <span class="selector-tag">height</span><span class="selector-pseudo">:50px</span>;</span></span><br><span class="line"><span class="css">        <span class="comment">/* 向左移动让边框重叠 */</span></span></span><br><span class="line"><span class="css">        <span class="selector-tag">margin-left</span><span class="selector-pseudo">:-2px</span>;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">li</span><span class="selector-pseudo">:hover</span>&#123;</span></span><br><span class="line"><span class="undefined">        border: solid 2px green;</span></span><br><span class="line"><span class="css">        <span class="comment">/* z-index必须和static以外的其他定位一起使用,否则无效 */</span></span></span><br><span class="line"><span class="undefined">        position: relative;</span></span><br><span class="line"><span class="css">        <span class="comment">/* 一行排列,从左到右,层级从0开始递增,最大值无限接近于1,所以这里只要为1,后面的层级就不会超过他*/</span></span></span><br><span class="line"><span class="undefined">        z-index: 1;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>z-index基于static之外的其他定位才有效<br>一行排列,从左到右,层次从零开始递增,最大无限接近于1<br>在同一个位置都有定位,那么按照顺序,后边的层次高于前面的.<br>默认和父元素的层次是一样的.</p>
</blockquote>

      
    </div>
    
    
    

    

    
      <div>
        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div></div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>打赏</span>
  </button>
  <div id="QR" style="display: none;">

    
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="/images/wechatpay.jpg" alt="Key 微信支付">
        <p>微信支付</p>
      </div>
    

    
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="/images/alipay.jpg" alt="Key 支付宝">
        <p>支付宝</p>
      </div>
    

    

  </div>
</div>

      </div>
    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/HTML/" rel="tag"># HTML</a>
          
            <a href="/tags/CSS/" rel="tag"># CSS</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2017/08/15/CSS/" rel="next" title="CSS入门">
                <i class="fa fa-chevron-left"></i> CSS入门
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2017/08/21/JAVAScript/" rel="prev" title="JavaScript入门">
                JavaScript入门 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="/images/avatar.jpg" alt="Key">
            
              <p class="site-author-name" itemprop="name">Key</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">107</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">12</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">28</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/keyarea" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i>GitHub</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="mailto:wxkayle@gmail.com" target="_blank" title="E-Mail">
                      
                        <i class="fa fa-fw fa-envelope"></i>E-Mail</a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#盒子模型"><span class="nav-number">1.</span> <span class="nav-text">盒子模型</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#盒子宽度和高度的计算"><span class="nav-number">1.1.</span> <span class="nav-text">盒子宽度和高度的计算</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#边框属性border"><span class="nav-number">1.2.</span> <span class="nav-text">边框属性border</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#内边距padding属性"><span class="nav-number">1.3.</span> <span class="nav-text">内边距padding属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#外边距margin属性"><span class="nav-number">1.4.</span> <span class="nav-text">外边距margin属性</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#外边距合并情况"><span class="nav-number">1.4.1.</span> <span class="nav-text">外边距合并情况</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#解决嵌套元素的外边距合并"><span class="nav-number">1.4.2.</span> <span class="nav-text">解决嵌套元素的外边距合并</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#浮动概念"><span class="nav-number">2.</span> <span class="nav-text">浮动概念</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#浮动的CSS定义格式"><span class="nav-number">2.1.</span> <span class="nav-text">浮动的CSS定义格式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#浮动的特点"><span class="nav-number">2.2.</span> <span class="nav-text">浮动的特点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#浮动的影响以及清除"><span class="nav-number">3.</span> <span class="nav-text">浮动的影响以及清除</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#浮动的影响"><span class="nav-number">3.1.</span> <span class="nav-text">浮动的影响</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#浮动的清除方式"><span class="nav-number">3.2.</span> <span class="nav-text">浮动的清除方式</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#定位position"><span class="nav-number">4.</span> <span class="nav-text">定位position</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#position不同属性的特点"><span class="nav-number">4.1.</span> <span class="nav-text">position不同属性的特点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#display属性"><span class="nav-number">5.</span> <span class="nav-text">display属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#伪元素"><span class="nav-number">6.</span> <span class="nav-text">伪元素</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#visbility"><span class="nav-number">7.</span> <span class="nav-text">visbility</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#层级-z-index"><span class="nav-number">8.</span> <span class="nav-text">层级 z-index</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; 2018 &mdash; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-snowflake-o"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Key</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
      <span class="post-meta-item-text">Site words total count&#58;</span>
    
    <span title="Site words total count">190.8k</span>
  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Mist</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  

  
  
    <script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
